<template>
  <div class="equipment-model">
    <div class="title-container clearfix">
      <div class="title lf">设备列表</div>
      <div class="rf clearfix">
        <div class="labelName lf">总下抓数</div>
        <div class="count lf">{{total_catch}}</div>
      </div>
      <div class="rf clearfix" style="margin-right:126px;">
        <div class="labelName lf">在线设备</div>
        <div class="count lf">{{online_device_count}}</div>
      </div>
    </div>
    <div class="search-box clearfix">
      <div class="labelName lf">设备名称：</div><el-input  class="elInput lf" v-model="device_name"></el-input>
      <div class="labelName lf">设备编号：</div><el-input class="elInput lf" v-model="device_sn"></el-input>
      <div class="labelName lf">设备状态：</div>
      <div class="cascader lf">
        <el-select v-model="device_status" placeholder="请选择">
          <el-option
            v-for="item in status_options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button class="lf" type="primary" @click="searchData()">查询</el-button>
      <el-button class="lf" type="primary" @click="synchronous()">同步设备</el-button>
    </div>
    <div class="table-box">
      <el-table :data="deviceList" @sort-change="onSortChange">
        <el-table-column label="设备编号" prop="device_sn"></el-table-column>
        <el-table-column label="设备名称" prop="device_name"></el-table-column>
        <el-table-column label="今日抓中" prop="today_catched" sortable="custom"></el-table-column>
        <el-table-column label="昨日抓中" prop="yesterday_catched" sortable="custom"></el-table-column>
        <el-table-column label="总抓中" prop="catched" sortable="custom"></el-table-column>
        <el-table-column label="设备状态" prop="device_status_desc"></el-table-column>
        <el-table-column label="今日下抓" prop="today_catch" sortable="custom"></el-table-column>
        <el-table-column label="昨日下抓" prop="yesterday_catch" sortable="custom"></el-table-column>
        <el-table-column label="总下抓" prop="catch" sortable="custom"></el-table-column>
        <el-table-column label="今日故障" prop="today_repair"></el-table-column>
        <el-table-column label="总故障" prop="repair"></el-table-column>
        <el-table-column label="添加时间" prop="add_time"></el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <div class="control">
              <el-switch
                @change="handleChangeDisplay(scope.row)"
                active-text="显示"
                inactive-text="隐藏"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.is_display"
                active-color="#3f87f5"
                inactive-color="#e6e8f5">
              </el-switch>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-sizes="pageSizeArray"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="total_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "equipment",
  methods: {
    searchData() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.getDeviceList();
    },
    //获取设备列表
    getDeviceList() {
      let formData = new FormData();
      formData.append("page", this.currentPage);
      formData.append("per_page", this.pageSize);
      formData.append("device_sn", this.device_sn);
      formData.append("device_name", this.device_name);
      formData.append("device_status", this.device_status);
      formData.append("sc_name", this.sc_name); //排序字段名
      formData.append("sc", this.sc); //排序规则，顺序 ‘asc’，倒序 ‘desc’
      // let formObj = {
      //   page: this.currentPage,
      //   device_sn: this.device_sn,
      //   device_name: this.device_name,
      //   device_status: this.device_status
      // };
      this.$http(
        "/wgl_admin/index.php?app=device&act=index",
        "POST",
        {},
        {},
        formData,
        success => {
          console.log(success.data.list);
          this.deviceList = success.data.list;
          this.total_count = success.data.total_count;
          this.total_catch = success.data.total_catch;
          this.online_device_count = success.data.online_device_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    //控制显示隐藏
    handleChangeDisplay(row) {
      let formData = new FormData();
      formData.append("device_id", row.device_id);
      formData.append("is_display", row.is_display);
      this.$http(
        "/wgl_admin/index.php?app=device&act=edit",
        "POST",
        {},
        {},
        formData,
        success => {
          this.$message.success("设置成功");
//          this.getDeviceList();
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    //同步设备
    synchronous() {
      this.$http(
        "/wgl_admin/index.php?app=device&act=sync_device",
        "get",
        {},
        {},
        {},
        success => {
          this.$message.success("设置成功");
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.getDeviceList();
    },
    handleSizeChange(data) {
      this.pageSize = data;
      this.getDeviceList();
    },
    //列表排序改变
    onSortChange: function (data) {
      console.log(data);
      if (data.order !== "null") {
        data.order === "ascending"
          ? (this.sc = "asc")
          : data.order === "descending" ? (this.sc = "desc") : (this.sc = "");
      }

      if (data.prop !== "null") {
        this.sc_name = data.prop;
      } else {
        this.sc_name = "";
      }
      this.getDeviceList();
    },
  },
  created() {
    this.getDeviceList();
  },
  mounted() {},
  data() {
    return {
      online_device_count: 0,
      total_catch: 0,
      total_count: 0,
      deviceList: [], //设备列表
      currentPage: 1,
      pageSize: 10,
      pageSizeArray : PageSizeArray,
      device_status: "",
      device_name: "",
      device_sn: "",
      status_options: [
        {
          label: "下线",
          value: 0
        },
        {
          label: "上线",
          value: 1
        },
        {
          label: "全部",
          value: 2
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.equipment-model {
  width: 100%;
  position: relative;
  padding: 30px 58px 30px 50px;
  .title-container {
    width: 100%;
    margin-bottom: 30px;
    height: 30px;
    .title {
      font-size: 22px;
      color: #333;
      height: 100%;
    }
    .labelName {
      height: 30px;
      line-height: 30px;
      margin-right: 4px;
      color: #484949;
      font-size: 14px;
    }
    .count {
      height: 30px;
      line-height: 30px;
      margin-right: 4px;
      color: #484949;
      font-size: 14px;
    }
  }
  .search-box {
    border: 1px solid #e6e8f4;
    min-width: 1146px;
    width: 100%;
    height: 90px;
    padding: 25px 30px;
    .elInput {
      display: block;
      width: 120px;
      font-size: 12px;
      color: #333;
      margin-right: 20px;
    }
    .cascader {
      margin-right: 20px;
    }
    .labelName {
      height: 40px;
      line-height: 40px;
      color: #333;
      font-size: 14px;
    }
  }
  .table-box {
    width: 100%;
    margin-top: 40px;
  }
  .pagination {
    width: 100%;
    text-align: right;
    margin-top: 46px;
  }
}
</style>
